<template>
  <view class="commission">
    <view class="hrader">
      <image
        src="../../../static/bback.png"
        class="goback"
        @click="back"
        mode=""
      />
      我的佣金
    </view>
    <view class="content">
      <view class="wrap">
        <view class="top">
          <view class="left" @click="open = !open">
            佣金余额
            <image
              class="img"
              v-if="open"
              src="../../../static/user/open.png"
              mode=""
            />
            <image
              class="img"
              v-else
              src="../../../static/user/close.png"
              mode=""
            />
          </view>
          <view class="tix" @click="gowithdrawal">立即提现</view>
        </view>
        <view class="yjye" v-if="open">￥{{ userInfo.now_income }}</view>
        <view class="yjye" v-else>****</view>
        <view class="bot">
          <view class="num">
            累计佣金:
            <view v-if="open">￥{{ userInfo.income }}</view>
            <view v-else>**** </view>
          </view>
          <view class="num">
            已提佣金:
            <view v-if="open">￥{{ userInfo.withdraw_income }}</view>
            <view v-else>**** </view>
          </view>
        </view>
      </view>
      <view class="record">
        <view
          :class="['tab', current === item.index ? 'active' : '']"
          v-for="(item, index) in recordList"
          :key="index"
          @click="change(item.index)"
        >
          <view class="">{{ item.name }}</view>
        </view>
      </view>
      <view class="lists">
        <view class="row" v-for="(item, index) in list" :key="index">
          <view class="lef">
            <view class="top">{{ item.order_type_text }}</view>
            <view class="bot">{{ item.add_time | formatDate }}</view>
          </view>
          <view v-if="item.true_amount > 0" class="num" style="color: #e68903"
            >+{{ item.true_amount }}</view
          >
          <view
            v-if="item.true_amount < 0"
            class="num"
            style="color: #c52b2e"
            >{{ item.true_amount }}</view
          >
        </view>
        <view class="kuaiqu" v-show="list.length == 0">
          <image
            class="img"
            src="../../../static/PersonalCenter/nodata.png"
            mode=""
          ></image>
          <view class="txt">您暂时没有相关记录~</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      open: true,
      recordList: [
        {
          index: 0,
          name: "分红记录",
        },
        {
          index: 1,
          name: "提现记录",
        },
      ],
      list: [],
      current: 0,
      userInfo: "",
    };
  },
  onShow() {
    this.token = uni.getStorageSync("token");
    if (this.token) {
      this.getuserInfo();
      this.getMyBill("12"); // 分红记录
    }
  },
  methods: {
    back() {
      uni.navigateBack({
        delta: 1,
      });
    },
    // 获取用户信息
    async getuserInfo() {
      let that = this;
      const res = await that.$myRequest({
        url: "user/getUserInfo",
        method: "GET",
        data: {},
      });
      if (res.data.code == 1) {
        that.headportrait = true;
        that.userInfo = res.data.data;
      }
    },

    change(index) {
      this.current = index;
      if (index == 0) {
        this.getMyBill("12"); // 分红记录
      } else if (index == 1) {
        this.getMyBill("11"); // 提现记录
      }
    },

    // 获取消费记录列表
    async getMyBill(index) {
      const res = await this.$myRequest({
        url: "index/getMyBill",
        method: "POST",
        data: {
          type: index,
        },
      });
      this.list = res.data.data.data;
    },

    gowithdrawal() {
      if (this.userInfo.mobile) {
        uni.navigateTo({
          url: "../myWallet/Withdrawal?type=2",
        });
      } else {
        uni.navigateTo({
          url: "../binding/binding",
        });
      }
    },
  },
};
</script>

<style lang="scss">
page {
  width: 750rpx;
  overflow-y: auto;
}
.hrader {
  width: 100%;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  position: relative;
  font-size: 36rpx;
  font-weight: 500;
  color: #333333;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  border-bottom: 20rpx solid #f4f4f4;
  .goback {
    position: absolute;
    width: 22rpx;
    height: 34rpx;
    left: 28rpx;
  }
}
.content {
  box-sizing: border-box;
  padding: 30rpx;
  overflow-y: auto;
  margin-top: 108rpx;
  .wrap {
    width: 100%;
    height: 330rpx;
    background: url("../../../static/user/yonjb.png") no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 40rpx;
    .top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      .left {
        display: flex;
        align-items: center;
        font-size: 28rpx;
        font-weight: 400;
        color: #fefefe;
        .img {
          display: block;
          width: 34rpx;
          height: 22rpx;
          margin-left: 14rpx;
        }
      }
      .tix {
        width: 166rpx;
        height: 54rpx;
        background: #f2e5d5;
        border-radius: 27rpx;
        text-align: center;
        line-height: 54rpx;
        font-size: 30rpx;
        font-weight: 400;
        color: #b18853;
      }
    }
    .yjye {
      font-size: 54rpx;
      font-weight: 500;
      color: #fefefe;
    }
    .bot {
      display: flex;
      align-items: center;
      margin-top: 85rpx;
      .num {
        display: flex;
        align-items: center;
        font-size: 28rpx;
        font-weight: 400;
        color: #fefefe;
        margin-right: 72rpx;
        view {
          display: block;
          height: 100%;
          margin-left: 5rpx;
        }
      }
    }
  }
  .record {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50rpx;
    .tab {
      margin: 0 50rpx;
      font-size: 30rpx;
      font-weight: 400;
      color: #999999;
      position: relative;
      &.active {
        color: #333333;
      }
      &.active::after {
        position: absolute;
        content: "";
        width: 48rpx;
        height: 6rpx;
        background: #c52b2e;
        border-radius: 3rpx;
        left: 50%;
        transform: translateX(-50%);
        bottom: -23rpx;
      }
    }
  }
  .lists {
    box-sizing: border-box;
    margin-top: 50rpx;
    .row {
      width: 100%;
      height: 125rpx;
      box-sizing: border-box;
      border-bottom: 1rpx solid #eee;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .top {
        font-size: 30rpx;
        font-weight: 400;
        color: #333333;
      }
      .bot {
        font-size: 26rpx;
        font-weight: 400;
        color: #999999;
        margin-top: 5rpx;
      }
      .num {
        font-size: 34rpx;
        font-weight: 500;
      }
    }
    .row:last-child {
      border-bottom: none;
    }
    .kuaiqu {
      .img {
        display: block;
        width: 288rpx;
        height: 156rpx;
        margin: 220rpx auto 0;
      }
      .txt {
        text-align: center;
        font-size: 26rpx;
        font-weight: 400;
        color: #999999;
        margin-top: 20rpx;
      }
    }
  }
}
</style>
